<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      lang="zh-cn">
<head>
    <meta content="云之讯,云通讯,云通讯平台" name="keywords"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>短信云平台运营系统 - 管理员中心</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link th:href="@{/resources/css/bootstrap.min14ed.css?v=3.3.6}" rel="stylesheet">
    <link th:href="@{/resources/css/font-awesome.min93e3.css?v=4.4.0}" rel="stylesheet"><!-- jqgrid-->
    <link th:href="@{/resources/js/plugins/jqgrid/css/ui.jqgrid-bootstrap.css}" rel="stylesheet">
    <link th:href="@{/resources/css/animate.min.css}" rel="stylesheet">
    <link th:href="@{/resources/css/style.min862f.css?v=4.1.0}" rel="stylesheet">
    <style>
        /* Additional style to fix warning dialog position */
        #alertmod_table_list_2 {
            top: 900px !important;
        }
    </style>
</head>
<body class="gray-bg"><div th:replace="stat :: statCode"></div>
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>操作日志</h5>
                </div>
                <!-- 搜索条件 -->
                <div class="ibox-content">
                	<form role="form" class="form-inline">
                        <div class="form-group">
                            <!-- <label for="example1" class="sr-only">用户名</label> -->
                            <input type="text" placeholder="用户名" id="realname" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="email" placeholder="邮箱" id="email" class="form-control">
                        </div>
                        <div class="form-group">
                    	    <select id="moduleList" class="form-control">
                    	    	<option value="">模块名:所有</option>
				            </select>
                        </div>
                        <div class="form-group">
                        	<input type="text" placeholder="页面url" id="pageUrl" class="form-control">
                        	<input type="text" placeholder="操作详情" id="opDesc" class="form-control">
                        </div>
                        <p/>
                        <!-- 时间选择 -->
                        <div class="form-group">
                        	<input type="text" placeholder="操作者ip" id="ip" class="form-control">
                        </div>
                        <div class="form-group" id="sandbox-container">
                            <div class="form-group pull-right">
                                <input placeholder="开始日期" class="form-control layer-date" id="start_time" th:value="${start_time}"/>至
                                <input placeholder="结束日期" class="form-control layer-date" id="end_time" th:value="${end_time}"/>
                            </div>
                        </div>
                        <div class="form-group">
                    	    <select id="opType" class="form-control">
                    	    	<option value="">日志类型:所有</option>
				            	<option value="1">查看</option>
				            	<option value="2">查询</option>
				            	<option value="3">增加</option>
				            	<option value="4">修改</option>
				            	<option value="5">删除</option>
				            	
				            </select>
                        </div>
                        <div class="form-group">
                        	<span>&nbsp;&nbsp;<button type="button" class="btn btn-sm btn-danger" onclick="search()">搜索</button></span>
                        </div>
                    </form>
                </div>
                
                <div class="ibox-content">
                    <div class="jqGrid_wrapper">
                        <table id="table_list"></table>
                        <div id="pager_list"></div>
                    </div>
                    <p>&nbsp;</p>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/resources/js/jquery.min.js?v=2.1.4}"></script>
<script th:src="@{/resources/js/bootstrap.min.js?v=3.3.6}"></script>
<script th:src="@{/resources/js/content.min.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/plugins/layer/laydate/laydate.js}"></script>
<script th:src="@{/resources/js/plugins/peity/jquery.peity.min.js}"></script>
<script th:src="@{/resources/js/plugins/jqgrid/js/i18n/grid.locale-cn.js}"></script>
<script th:src="@{/resources/js/plugins/jqgrid/js/jquery.jqGrid.min.js}"></script>
<script th:src="@{/resources/js/date_format.min.js?v=1.0.0}"></script>
<script th:src="@{/resources/js/common.js?v=1.0.0}"></script>

<script th:inline="javascript">
    /*<![CDATA[*/
    var start = {
        elem: "#start_time",
        format: "YYYY-MM-DD hh:mm:ss",
//        min: laydate.now(),
        max: laydate.now(),
        start:/*[[${start_time}]]*/,
        istime: true,
        istoday: true,
        choose: function (datas) {
            end.min = datas;
        }
    };
    var end = {
        elem: "#end_time",
        format: "YYYY-MM-DD hh:mm:ss",
//        min: "#start",
        max: laydate.now(),
        start:/*[[${end_time}]]*/,
        istime: true,
        istoday: true,
        choose: function (datas) {
            start.max = datas;
        }
    };
    laydate(start);
    laydate(end);

    function search(){

        $("#table_list").jqGrid('setGridParam',{
            datatype:'json',
            postData: {
                realname: $("#realname").val(),
                email: $("#email").val(),
                module: $("#moduleList").val(),
                pageUrl: $("#pageUrl").val(),
                ip: $("#ip").val(),
                opDesc: $("#opDesc").val(),
                start_time: $("#start_time").val(),
                end_time: $("#end_time").val(),
                opType: $("#opType").val(),

            }, //发送数据
//            page:1
        }).trigger("reloadGrid"); //重新载入
    }
    
    // 模块名称select自动填充
    $(document).ready(function () {
    	var reqUrl = /*[[@{/smsOprateLog/modules}]]*/;
    	var selection= document.getElementById("moduleList");
    	$.ajax({
    		type: "GET",
    		dataType: "json",
    		url: reqUrl,
    		success: function(data){
    			if(data != null){
    				for(var i = 0; i< data.length;i++){
    					var _option = document.createElement("option");
    					_option.text = data[i].param_value;
    					_option.value = data[i].param_key;
    					selection.appendChild(_option);
    				}
    			}
    		}
    	});
    });
    
    $(document).ready(function () {
        $.jgrid.defaults.styleUI = "Bootstrap";
        $("#table_list").jqGrid({
            url:/*[[@{/smsOprateLog/list}]]*/,
            mtype: 'POST',
            datatype: "json",
            jsonReader : {
                root:"list",
                page: "currentPage",
                total: "totalPage",
                records: "totalCount"
            },
            height: 'auto',
            rownumbers:true,
            autowidth: true,
            shrinkToFit: true,
            rowNum: 20,
            rowList: [10, 20, 30,50],
            colNames: ["用户名", "邮箱", "管理员ID", "日志ID", "模块名称", "访问URL", "日志类型", "操作者IP", "操作时间", "操作详情"],
            colModel: [
                {name: "realname",width: 25,align: "left",sortable:false},
                {name: "email",width: 35,align: "left",sortable:false},
                {name: "admin_id",  width: 20, align: "left",sortable:false},
                {name: "log_id",  width: 15, align: "left",sortable:false},
                {name: "page_id",  width: 50, align: "left",sortable:false,
                	formatter:function(cellvalue){
                        return moduleName(cellvalue);
                	}
                },
                {name: "page_url",  width: 50, align: "left",sortable:false},
                {name: "op_type",  width: 25, align: "left",formatter: "select", editoptions:{value:"1:查看;2:查询;3:增加;4:修改;5:删除	"},sortable:false},
                {name: "ip",  width: 30, align: "left",sortable:false},
                {name: "create_date",  width: 50, align: "left",sortable:false,
                    formatter:function(cellvalue, options, rowObject){
                        var time = new Date(rowObject.create_date);
                        return $.formatDate(time);
                    }
                },
                {name: "op_desc",width: 150,align: "left",sortable:false}
            ],
            pager: "#pager_list",
            viewrecords: true,
            hidegrid: false
        });
        
        $(window).bind("resize", function () {
            var width = $(".jqGrid_wrapper").width();
            $("#table_list").setGridWidth(width);
        })
        
        function moduleName(pageId) {
            var  opts = $("#moduleList option");
            for (var i in opts){
                if (opts[i].value == pageId){
                    return opts[i].text;
                }
            }
        }

        function keyUp(e) {
            var currKey=0,e=e||event;
            currKey=e.keyCode||e.which||e.charCode;
            var keyName = String.fromCharCode(currKey);
            if (currKey == 13){
                search();
            }
        }
        document.onkeyup = keyUp;
        
    });
    /*]]>*/
</script>
</body>
</html>